<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="Name">
        <el-col :span="7">
          <el-input v-model="form.name" />
        </el-col>
      </el-form-item>
      <el-form-item label="Gender">
        <el-select v-model="form.gender" placeholder="Select Gender">
          <el-option label="Male" value="male" />
          <el-option label="Female" value="female" />
        </el-select>
      </el-form-item>
      <el-form-item label="Birthday">
        <el-col :span="7">
          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <el-form-item label="Phone">
        <el-col :span="7">
          <el-input v-model="form.phone" />
        </el-col>
      </el-form-item>
      <el-form-item label="Adress">
        <el-select v-model="form.adress" placeholder="Select Adress">
          <el-option label="Beijing" value="beijing" />
          <el-option label="Shanghai" value="shanghai" />
          <el-option label="Guangzhou" value="guangzhou" />
          <el-option label="Hongkong" value="hongkong" />
        </el-select>
      </el-form-item>
      <el-form-item label="BIO">
        <el-col :span="7">
          <el-input v-model="form.desc" type="textarea" />
        </el-col>
      </el-form-item>
      <el-form-item label="Family Relation">
        <el-radio-group v-model="form.resource">
          <el-radio label="Father" />
          <el-radio label="Mother" />
          <el-radio label="Grandfather" />
          <el-radio label="Grandmother" />
          <el-radio label="Brother" />
          <el-radio label="Sister" />
          <el-radio label="Wife" />
          <el-radio label="Husband" />
          <el-radio label="Uncle" />
          <el-radio label="Aunt" />
        </el-radio-group>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Save</el-button>
        <!-- <el-button @click="onCancel">Cancel</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: 'qwe',
        gender: 'male',
        date1: '2006-03-09',
        phone: 15343295782,
        adress: 'beijing',
        desc: 'test bio',
        resource: 'Brother'
      }
    }
  },
  methods: {
    onSubmit() {
      this.$message('Save Successful!')
      this.$router.push({ path: '/Family', query: { username: this.form.name }})
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>